<!DOCTYPE html>
<html>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta
    name="viewport"
    content="initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no,uc-fitscreen=yes"
  />
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      .min {
        width: 100%;
        display: flex;
        justify-content: center;
      }
      .minCent {
        width: 100%;
      }
      .function {
        margin: 10px;
      }
      .mr-T {
        margin-top: 5px;
      }
      .text {
        text-align: center;
        font-size: 16px;
      }
      .centerbox {
        padding: 20px;
      }
      a {
        border: 1px solid #4f4f4f;
        border-radius: 4px;
        padding: 0px 3.5px;
        background-color: #e5e5e5;
        text-decoration: none;
        color: #4f4f4f;
        font-size: 15px;
        /* color: red; */
      }
    </style>
  </head>
  <body>
    <div class="min">
      <div class="centerbox">
        <div>圣诞快乐~给你头像加个框框~</div>
        <div class="minCent">
          <canvas id="myCanvas" width="300" height="300"></canvas>
        </div>
        <div class="function">
          <div class="mr-T">
            <input type="file" name="file2" id="change2" />
          </div>
          <div class="mr-T">
            <button class="button" onclick="button()">重新上传</button>
          </div>
          <div class="mr-T">
            <a href="" id="download" download="测试图片.png"
              >点我下载（请在第三方浏览器下载）</a
            >
          </div>
          <div class="mr-T">
            <button class="button" onclick="buttonImg()">更换背景</button>
          </div>
        </div>
      </div>
    </div>

    <script>
      var canvas = document.getElementById('myCanvas')
      var context = canvas.getContext('2d')
      var btn = document.getElementById('btn')
      var change2 = document.getElementById('change2')
      var download = document.getElementById('download')
      //处理跨域
      var img1 = new Image()
      img1.src = '1.png'
      img1.onload = imgfn //图片加载完在执行
      function imgfn() {
        var bg = context.createPattern(img1, 'no-repeat') //createPattern() 方法在指定的方向内重复指定的元素。
        context.fillStyle = bg
        context.fillRect(0, 0, context.width, context.height) //绘制已填充矩形fillRect(左上角x坐标, 左上角y坐标, 宽, 高)
      }

      var img2 = new Image()
      img2.crossOrigin = 'anonymous'
      change2.onchange = function (event) {
        var file = event.target.files[0]
        var url = window.URL.createObjectURL(file)
        img2.src = url
      }
      img2.onload = function () {
        context.drawImage(img2, 5, 5, 285, 285)
      }
      img1.onload = function () {
        context.globalCompositeOperation = 'destination-over'
        context.drawImage(img1, 0, 0, 300, 300)
      }
      function button() {
        window.location.reload()
      }
      download.onclick = function (blob) {
        is_weixin()
        if (is_weixin()) return
        var img = convertCanvasToImage(canvas)
        download.href = img.src
      }
      function convertCanvasToImage(canvas) {
        var image = new Image()
        image.crossOrigin = 'anonymous'
        image.src = canvas.toDataURL('image/png')
        return image
      }
      function is_weixin() {
        var ua = window.navigator.userAgent.toLowerCase()
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          alert(
            '当前浏览器不支持头像下载，请点击右上角使用 手机 自带浏览器打开！'
          )
          return true
        } else {
          console.log('不是微信浏览器')
          return false
        }
      }
      var i = 1
      function buttonImg() {
        context.height = context.height
        var img3 = new Image()
        i++
        if (i == 4) {
          i = 1
        }
        img3.src = `${i}.png`
        img3.onload = imgfn //图片加载完在执行
        function imgfn() {
          var bg = context.createPattern(img3, 'no-repeat') //createPattern() 方法在指定的方向内重复指定的元素。
          context.fillStyle = bg
          context.fillRect(0, 0, context.width, context.height) //绘制已填充矩形fillRect(左上角x坐标, 左上角y坐标, 宽, 高)
        }
        img3.onload = function () {
          context.globalCompositeOperation = 'destination-over'
          context.drawImage(img3, 0, 0, 300, 300)
        }
      }
    </script>
  </body>
</html>
